<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ page import="java.net.URLDecoder" %>
<%@ page import="java.net.URLEncoder" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>编辑文档</title>
    <script type="text/javascript" charset="UTF-8" src="../utf8-jsp/ueditor.config.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../utf8-jsp/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="UTF-8" src="../utf8-jsp/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    <style type="text/css">
        html,body{
            margin:0px;
            padding:0px;
            border:0px;
            width:100%;
            height:100%;
        }
        body{
            background: url("/images/background3.jpg") repeat;
        }
        div{
            width:100%;
        }
        .titleContent{
            text-align: center;
            font-size:35px;
            font-weight:bold;
            color: #292525;
            background-color: transparent;
            border:0;
        }
        .titleBtn{
            text-align:center;
            width:100%;
        }
        .editorBox{
            width:100%;
            height:100%;
        }
        .titleBtnBox{
            margin:0 auto;
            width:60%;
            background: rgba(243, 238, 252, 0.25);
        }
        .public-button { /* 按钮美化 */
            width: 100px; /* 宽度 */
            height: 40px; /* 高度 */
            border-width: 0px; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            background: #8d9eff; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */
            font-family: Microsoft YaHei; /* 设置字体 */
            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
            float: right;
            margin-top:5px;
        }
        .public-button:hover { /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }
    </style>
    <%
        String val1 = "编写文章";
        String tempVal1 = request.getParameter("title");
        if(tempVal1!=null){
            //val1 = new String(tempVal1.getBytes(),"utf-8");
            val1 = tempVal1;
        }
    %>
    <script type="text/javascript">
        var targetUrl = '<%=request.getParameter("targetUrl")%>';
        var docType = '<%=request.getParameter("docType")%>';
        var doc_id = "";
        function publish(){
            var title = $(".titleContent").val();
            var content = getContent();
            //ajax提交内容
            if(doc_id!=""&&doc_id!=null&&doc_id!=undefined&&doc_id!='null'){
                sendByAjax({"content":content,"title":title,"doc_id":doc_id});
            }else{
                sendByAjax({"htmlContent":content,"title":title,"docType":docType});
            }
        }

        function sendByAjax(article){
            $.post(targetUrl,article,function(result){
                if(result.success=="ok"){
                    document.getElementsByClassName("public-button")[0].disabled="true";
                    alert("发布成功！");
                }else{
                    alert("发布失败！");
                }
            },"json");
        }

        function getContent() {
           /* var arr = [];
            arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            arr.push("内容为：");
            arr.push(UE.getEditor('editor').getContent());
            alert(arr.join("\n"));*/
            return UE.getEditor('editor').getContent();
        }

        window.onload = function() {
            var event = document.getElementsByClassName("public-button")[0];
            event.onclick = function(){
                if(confirm("确定发布吗？")){
                    publish();
                }
            }

            doc_id = '<%=request.getParameter("docId")%>';
            var loadDataUrl = '<%=request.getParameter("loadDataUrl")%>';
            if(doc_id!=""&&doc_id!=null&&doc_id!=undefined&&doc_id!='null'){
                $.post(loadDataUrl,{"docId":doc_id},function(result){
                    ue.setContent(result);
                });
            }
        }
    </script>
</head>
<body>
    <div class="editorBox"><div class="titleBtn"><div class="titleBtnBox"><input class="titleContent" size="20" value="<%=val1%>"/><button class="public-button" type="button">发布</button></div></div>
        <script id="editor" type="text/plain" style="width:77.5%;height:80%;margin-left:20%;"></script></div>
</body>
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');


</script></html>